<template>
  <div class="HighScannerBtBox">
    <div class="HighScannerBtBox-main">
      <div class="HighScannerBtBox-mainLf">
        <OBJECT :id="shighScanner"  class="objectbox box HighScannerBtobjectbox" height="100%" width="100%"
          classid="clsid:025C4BD9-3CF1-489A-AD80-4E7851601ADA" border="1"></OBJECT>
      </div>
      <div class="HighScannerBtBox-mainLr">
        <div class="mainLr-start" element-loading-spinner="el-icon-loading"  v-loading="openCameraBtnLoading" @click="openCamera(point)">
          <div class="mainLr-start-t">
            <i class="el-icon-picture"></i>
          </div>
          <div class="mainLr-start-b">
            开启相机
          </div>
        </div>
        <el-button class="mainLr-start mainLr-startSe"  @click="shooting">
          <div class="mainLr-start-t">
            <i class="el-icon-picture"></i>
          </div>
          <div class="mainLr-start-b">
            开始采集
          </div>
        </el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "HighScanner",
  data() {
    return {
      /**
       * 拍照默认参数
       */
      camDevOptions: {
        VERTICAL_CAMERA: "v",
        HORIZONTAL_CAMERA: "h",
        IMAGE_SIZE: {
          WIDTH: 1600,
          HIGH: 1200
        },
        IMAGE_QUALITY: 30,
        OPEN_AUTO_CORP_RECT: 1,
        CLOSE_AUTO_CORP_RECT: 0,
        IMAGE_ROTATE: 270
      },
      open: false,
      angle: null,
      pCustomObjPtr: null,
      oldUnloadEventProc: null,
      picCount: 1,
      pictures: [],
      camera: null,
      openCameraBtnLoading: false,
      shootingBtnLoading: false,
      shootingBtnDisable: true
    };
  },
  mounted() {
    if (this.shighScanner === "IdCardShighScanner") {
      this.camera = IdCardShighScanner;
    } else if (this.shighScanner === "ElectronicData") {
      this.camera = ElectronicData;
    }
  },
  props: ["shighScanner",'point'],
  methods: {
    /**
     * 初始化高拍仪拍照功能
     * @param shighScanner 页面的高拍仪ID
     * @param openIdx 初始化哪个摄像头
     * @param autoCorpRect 是否打开裁剪
     */
    initCamDev: function(openIdx, autoCorpRect) {
      let temp = this;
      if (window.onbeforeunload) {
        temp.oldUnloadEventProc = window.onbeforeunload;
      }
      window.onbeforeunload = this.destoryActiveX;
      temp.camera.SetSizeImageSize(
        this.camDevOptions.IMAGE_SIZE.WIDTH,
        this.camDevOptions.IMAGE_SIZE.HIGH
      ); //设置未打开裁剪时，图像的大小
      temp.camera.SetJPEGQuality(this.camDevOptions.IMAGE_QUALITY); //设置图像质量
      temp.camera.SetAutoCorpRect(autoCorpRect); //设置图像裁剪，默认为打开   1位打开，0位关闭
      setTimeout(function() {
        temp.camera.OpenCam(openIdx);
      }, 500);
      setTimeout(function() {
        temp.openCameraBtnLoading = false;
        temp.shootingBtnDisable = false;

      }, 1500);
    },

    /**
     * 拍摄图片
     * @param shighScanner
     * @returns {*} 返回图片路径
     */
    saveImage: function() {
      let temp = this;
      if (!temp.camera) return;
      var filePath = temp.camera.GetSpecDir(1);
      filePath = filePath + "\\pic" + temp.picCount + ".jpg";
      if (0 !== temp.camera.SaveImage(filePath)) {
        return "";
      }
      this.picCount += 1;
      return filePath;
    },

    /**
     * 拍摄图片并旋转图片
     * @param shighScanner
     * @returns {*} 返回图片路径
     */
    saveImageEx: function() {
      let temp = this;
      if (!temp.camera) return;
      var filePath = temp.camera.GetSpecDir(1);
      filePath = filePath + "\\pic" + temp.picCount + ".jpg";
      if (0 !== temp.camera.SaveImageEx(filePath, temp.camDevOptions.IMAGE_ROTATE)) {
        return "";
      }
      temp.picCount += 1;
      return filePath;
    },

    /**
     * 销毁页面的高拍仪插件
     */
    destoryActiveX: function() {
      //销毁页面的高拍仪插件
      //   if (this.oldUnloadEventProc) {
      //     console.log('old')
      //     this.oldUnloadEventProc();
      //   }
      this.camera.CloseCam();
      this.camera = null;
    },
    openCamera: function(cameraType) {
      if(!this.open || this.angle!==cameraType){
        this.openCameraBtnLoading = true;
        var autoCorpRect = this.camDevOptions.OPEN_AUTO_CORP_RECT;
        this.open = true;
        this.angle = cameraType;
        this.initCamDev(cameraType, autoCorpRect);
      }else {
        this.$message({
          message: "相机已准备就绪",
          type: "info"
        });
      }
      
    },
    shooting: function() {
      this.shootingBtnLoading = true;
      var filePath = this.saveImage();
      this.$emit("transPic", filePath);
      console.log('采集成功:'+filePath)
      if(filePath){
        this.$notify({
          title: "成功",
          message: "拍摄成功",
          type: "success",
          duration: 2000
        });
      }else{
        this.$message.error("拍摄失败")
      }
      
    },
    /**
     * 上传文件附带参数
     * @param uploadType 上传类型
     * @param params 上传的附带参数 以json串方式上传
     * @param url 上传路径
     * @param filePath 文件本地路径
     * @param args 参数，直接传''
     * @returns {*}
     */
    uploadFile: function(params, url, filePath) {
      let temp = this;
      /** 如果找不到插件信息直接返回空 */
      if (!temp.camera) {
        console.log("error:未找到高拍仪拍照插件");
        return "";
      }
      var result = temp.camera.UploadFile2(
        "id_card_portrat",
        params,
        url,
        filePath,
        ""
      );
      return result;
    }
  }
};
</script>
<style scoped>
.mainLr-startSe {
  background-color: #f8ac59 !important;
  margin-top: 45px;
  margin-left: 0;
}

.mainLr-start-t {
  width: 100%;
  height: 40px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 15px;
}

.mainLr-start-t .el-icon-picture {
  font-size: 30px;
}

.mainLr-start .el-loading-spinner {
  margin-top: -11px !important;
}
.mainLr-start-b {
  width: 100%;
  height: 40px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.mainLr-start {
  background-color: #21b9bb;
  border-color: #21b9bb;
  color: #fff;
  width: 96px;
  height: 92px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  border-radius: 5px;
  overflow: hidden;
  position: relative;
}

.HighScannerBtBox-mainLf {
  height: 390px;
  width: 630px;
  overflow: hidden;
  background-color: #000;
}

.HighScannerBtBox-mainLr {
  height: 390px;
  width: 260px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.HighScannerBtBox-main {
  height: 390px;
  width: 100%;
  margin-left: 25px;
  display: flex;
  justify-content: space-between;
  overflow: hidden;
  margin-top: 30px;
}

.HighScannerBtBox {
  background-color: #fff;
  width: 100%;
  height: 450px;
}
</style>